<template>
  <div class="page">
    <div class="page-bg short">
      <div class="page2">
        <div class="page-title">
          综合排名
        </div>
        <div class="page-content">
          <div class="echarts">
            <div id="echarts02"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  name: "page7",
  components: {},
  data() {
    return {
      chartData: {},
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/2", {});
    this.chartData = data;
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      const { yAxisData1, yAxisData2, level } = this.chartData;
      const data1 = [...yAxisData1];
      const data2 = [...yAxisData2];

      let params = {
        data1,
        // data1: data1.map((e) => (e === Math.max.apply(null, data1) ? "" : e)),
        data2: data2,
        // data2: data2.map((e) => (e === Math.max.apply(null, data2) ? e : "")),
        level,
      };

      this.echarts01(params, yAxisData2);
    },
    echarts01(echarts, sortData) {
      let emptyColor = "#3559A4";
      let myChart = this.$echarts.init(document.getElementById("echarts02"));
      let option = {
        legend: {
          show: false,
        },
        // title: {
        //   ...echartsConfig.title,
        //   text: "工单总量 (单）",
        // },
        grid: {
          ...echartsConfig.grid,
        },
        yAxis: [
          {
            ...echartsConfig.yAxis,
            name: "工单总量 (单）",
            nameLocation: "center",
            nameGap: 100,
            nameRotate: 90,
          },
        ],
        xAxis: [
          {
            ...echartsConfig.xAxis,
            splitLine: {
              show: false,
            },
            data: echarts.level.map((e) => `${e}月`),
          },
        ],
        series: [
          {
            name: "月份",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4394FF" },
                  { offset: 1, color: "#7EEFFF" },
                ]),
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 32,
              formatter: function(params) {
                const str = "{img| " + sortData[params.dataIndex] + "\r" + "}";
                return str;
              },
              rich: {
                img: {
                  backgroundColor: {
                    image:
                      "",
                  },
                  color: "#fff",
                  fontSize: 36,
                  fontWeight: 500,
                  width: 64,
                  height: 76,
                  lineHight: 76,
                  align: "center",
                  verticalAlign: "top",
                },
              },
            },
            zlevel: 2,
            barWidth: 48,
            data: echarts.data1,
          },
          {
            name: "月份",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFD993" },
                  { offset: 1, color: "#FF7D61" },
                ]),
              },
            },
            label: {
              show: true,
              position: "top",
              distance: 32,
              formatter: function(params) {
                return "";
              },
              rich: {
                img: {
                  backgroundColor: {
                    image:
                      "",
                  },
                  color: "#fff",
                  fontSize: 36,
                  fontWeight: 500,
                  width: 64,
                  height: 76,
                  lineHight: 76,
                  align: "center",
                  verticalAlign: "top",
                },
              },
            },
            barWidth: 48,
            barGap: "-100%",
            data: echarts.data1,
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.page2 {
  .page-content {
    .echarts {
      position: relative;
      width: 1824rem;
      height: 680rem;
      #echarts02 {
        width: 1824rem;
        height: 680rem;
      }
    }
  }
}
</style>
